{extend name="$BASE_POPUP" /}
{block name="body"}
  <link rel="stylesheet" href="__STATIC__/orgchart/demo/css/font-awesome.min.css">
  <link rel="stylesheet" href="__STATIC__/orgchart/demo/css/jquery.orgchart.css">
  <link rel="stylesheet" href="__STATIC__/orgchart/demo/css/style.css">
  <input type="hidden" id="selected-node" />
  <div id="chart-container"></div>
  <style type="text/css">
    #chart-container{
      height: 817px;
    }
    .is_pow1{background-color: #0e0000}
    .orgchart .node{width: 190px;}
  </style>
  
{/block}

{block name="script"}
<script type="text/javascript" src="__STATIC__/orgchart/demo/js/jquery.orgchart.js"></script>
<script type="text/javascript">
    var user_id ="{$user_id}"
    $(function() {

        var data = {$data};
        var getId = function() {
            return (new Date().getTime()) * 1000 + Math.floor(Math.random() * 1001);
          };
          
        var nodeTemplate = function(data) {
            return `
              <div class="js_box is_pow" data-id="${data.id}">
              <div class="title">用户名：${data.username}</div>
              <div class="title">手机号：${data.phone}</div>
              <div class="title">认证姓名：${data.real_name}</div>
              </div>
            `;
        };
        
        var oc = $('#chart-container').orgchart({
            'data' : data,
            'nodeTemplate': nodeTemplate,
            'createNode': function($node, data) {
                $node[0].id = getId();
            }
        });
        var aid = '';
        oc.$chartContainer.on('click', '.node', function() {
            var $node = $(this);
            var aid = $node.find('.js_box').data('id');
            if(!aid){
                return;
            }
            if(aid == user_id){
                return ;
            }
            $node.find('.js_box').removeClass('js_box');
            $.getJSON(getURL('load_childs'),{pid:aid},function (json){
                oc.addChildren($node,json);
            })
        });
//    
//        $('#chart-container').on('click','.js_box', function (argument) {
//            var $node = $('#selected-node').data('node');
//            var aid = $(this).data('id'); //获取用户id
//            $.getJSON(getURL('load_childs'),{aid:aid},function (json){
//                
//                oc.addChildren($node,json);
//
//            })
//
//
//        });

    });

</script>
{/block}


